<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Bandit-Blog后台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blogAdd.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<c:import url="${pageContext.request.contextPath}/WEB-INF/jsp/commons/backheader.jsp"></c:import>
    <div class="layui-body">
        <fieldset class="layui-elem-quote">新增博客</fieldset>
        <form class="layui-form" id="blogAdd" style="width: 1680px">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="title" id="title" placeholder="输入文章标题" required lay-verify= "required" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">概要</label>
                <div class="layui-input-block">
                    <textarea name="summary" id="summary" maxlength="150" class="layui-textarea" placeholder="输入文章概要" required lay-verify= "required" autocomplete="off"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">关键词</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="title" id="keyword" placeholder="输入关键词" required lay-verify= "required" autocomplete="off">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="interest" lay-filter="type" id="typeSelect">
                        <option value=""></option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <fieldset>正文编辑</fieldset>
                    <br>
                    <div id="test-editor">
                    <textarea name="content" id="content" style="display:none;"></textarea>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit id="save_btn">点击发布</button>
                </div>
            </div>
        </form>


    </div>
</div>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            path   : "${pageContext.request.contextPath}/static/editor.md-master/lib/",
            placeholder: '马上开始撰写博客内容吧...',
            width   : "100%",
            height  : 600,
            emoji:true,
            tocm: true,
            tex: true,
            dialogLockScreen: false,
            dialogShowMask: false,
            dialogDraggable: false,
            dialogMaskOpacity:0.4,
            dialogMaskBgColor:"#000",
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "${pageContext.request.contextPath}/editormdPic",  //需要修改为后端的解析图片上传的url
            saveHTMLToTextarea : true,
            onload : function() {
                initPasteDragImg(this); //允许粘贴和拖拉图片到editormd
            }
        });

        $('#blogAdd').on('submit', function (e){
            let layer;
            layui.use(['layer'],function(){
                layer = layui.layer;
                layer.load(1);
            })
            e.preventDefault();
            let Data = $(this).serializeArray();
            let htmlText = editor.getHTML();
            let md = editor.getMarkdown();
            let content = htmlText + '￥' + md;
            console.log(Data);
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/AddBlog',
                data: {
                    "title":Data[0].value,
                    "summary":Data[1].value,
                    "keyword":Data[2].value,
                    "blogTypeId":Data[3].value,
                    "content":Data[4].value,
                    "test-editor-html-code":Data[5].value,
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res.msg);
                    parent.layer.closeAll();
                    layer.msg('发布成功！');
                    setTimeout(function(){
                        parent.layer.closeAll();
                        window.location.href = '/toBlogManger';
                    },2000)
                },
                error: function () {
                    console.log("错误");
                }
            })
        });

    });
</script>
<script>
    $(function (){
        layui.use(['form'],function (){
            var form =layui.form;
            $.ajax({
                url: "${pageContext.request.contextPath}/queryTypeList",
                contentType: "application/json",
                dataType: 'json',
                success(data){
                    console.log(data);
                    let type_list = [];
                    for (let key in data.typeList){
                        let element = `<option value="${"${data.typeList[key].id}"}">${"${data.typeList[key].typeName}"}</option>`
                        type_list.push(element);
                    }
                    console.log(type_list);
                    $('#typeSelect').append(type_list.join(''));
                    form.render();
                }
            })
        })

    })
</script>
</body>
</html>
